<template>
  <div class="hm-article">
    <div class="header">
      <!-- <div class="tab">
        <ul v-for="(item, index) in arr" :key="index">
          <li :class="{ xx: index === num }" @click="fn(index)">{{ item }}</li>
        </ul>
      </div> -->
      <div :class="{ old: num === 1 }" @click="fn(1)"><span>推荐</span></div>
      <div :class="{ old: num === 2 }" @click="fn(2)"><span>最新</span></div>
      <!-- <van-tabbar v-model="active">
        <van-tabbar-item>推荐</van-tabbar-item>
        <van-tabbar-item>最新</van-tabbar-item>
      </van-tabbar> -->
      <img class="logo" src="../assets/logo.dbd40807.png" alt="" />
    </div>
    <div
      class="body"
      v-for="item in List"
      :key="item.id"
      @click="$router.push(`/detail/${item.id}`)"
    >
      <HmTab :item="item"></HmTab>
    </div>
  </div>
</template>

<script>
import HmTab from "@/components/HmTab.vue";
import axios from "axios";
export default {
  data() {
    return {
      List: [],
      arr: ["推荐", "最新"],
      num: 1,
    };
  },
  components: { HmTab },
  created() {
    this.get();
  },
  methods: {
    async fn(index) {
      this.num = index;
      if (this.num === 1) {
        this.get();
      } else {
        const res = await axios({
          url: "http://interview-api-t.itheima.net/h5/interview/query",
          params: { current: 1, pageSize: 10, sorter: "weight_desc" },
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        });
        this.List = res.data.data.rows;
      }
    },
    async get() {
      // try {
      const res = await axios({
        url: "http://interview-api-t.itheima.net/h5/interview/query",
        params: { current: 1, pageSize: 10 },
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
      });
      console.log(res);
      // this.List.push(...res.data.data.rows);
      this.List = res.data.data.rows;
      // } catch {
      //   alert("获取失败");
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.hm-article {
  padding-top: 46px;
  padding-bottom: 50px;
}
.body {
  padding: 10px;
  border-bottom: 1px solid #adaea6;
}

.selected {
  color: #adaea6;
  margin: 10px 10px;
  font-size: 13px;
}
.ex-selected {
  color: black;
  font-size: 13px;
  border-bottom: 1px solid;
}
.header {
  width: 100%;
  height: 45px;
  color: #adaea6;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid;
  //固定位置
  position: fixed;
  top: 0;
  left: 0;
  //关闭默认事件
  touch-action: none;
  div {
    color: #adaea6;
    margin: 10px 10px;
    font-size: 13px;
  }
  .old {
    color: black;
    //底部边框
    border-bottom: 3px solid black;
  }
}

.logo {
  width: 65px;
  height: 30px;
  position: fixed;
  right: 10px;
}
</style>
